<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="tutu"></div>
  <script src="./index.js"> </script>
  <script>
    const vnode = h('div', {class: "eason"}, [
      h("h2", null, "当前歌曲: 100"),
      h("button", {onclick: function() {}}, "+1"),
      h('h3',null, [h('h3', null, "我是第三层vnode1"),
      h('h3', null, "我是第三层vnode2"),
      h('h3', null, [h('h4', null, '我是第四层vnode')])
    ])])
    console.log(vnode)
    setTimeout(()=>{
      // 创建一个新 VNode  将两个VNode 进行diff 算法 
      const vnode1 = h('h2', {class: "shall we talk"},  [
      h("h2", null, "shall we talk"),
      h("button", {onclick: function() {}}, "++1")
    ])
      patch(vnode, vnode1)
    },
    3000)

 

    mount(vnode, document.querySelector("#tutu"))
    
  </script>
</body>
</html>